import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { missing } from '../../../utils/utils';

@Component({
  selector: 'apes-button-list',
  template: `
    <button *ngFor="let data of buttonBarMetadata" apes-button
            type="button"
            class="{{prefixCls}}-btn"
            [apesLoading]="data.loading && data.loading === true"
            [class.apes-button-list-default]="data.style === 'default'"
            [class.apes-button-list-primary]="data.style === 'primary'"
            [class.apes-button-list-highlight]="data.style === 'highlight'"
            [class.apes-button-list-disabled]="evaluate(data.disabled)"
            [disabled]="evaluate(data.disabled) || data.loading || ctx['loading']"
            (click)="_onclick(data,$event)"
            (mouseover)="_onMouseOver(data)">
      {{data.label}}
    </button>

    <ng-container *ngFor="let group of buttonGroupMetadata">
      <button apes-button
              apes-dropdown [apesDropdownMenu]="menu"
              class="{{prefixCls}}-btn"
              [apesPlacement]="'bottomCenter'">
        {{ group.name }}
      </button>
      <apes-dropdown-menu #menu="apesDropdownMenu">
        <ul apes-menu>
          <li apes-menu-item *ngFor="let data of group.btnList">
            <button apes-button
                    type="button"
                    class="{{prefixCls}}-btn"
                    [apesLoading]="data.loading && data.loading === true ? true : false"
                    [class.apes-button-list-default]="data.style === 'default'"
                    [class.apes-button-list-primary]="data.style === 'primary'"
                    [class.apes-button-list-highlight]="data.style === 'highlight'"
                    [class.apes-button-list-disabled]="evaluate(data.disabled)"
                    [disabled]="evaluate(data.disabled) || data.loading || ctx['loading']"
                    (click)="_onclick(data,$event)"
                    (mouseover)="_onMouseOver(data)">
              {{data.label}}
            </button>
          </li>
        </ul>
      </apes-dropdown-menu>
    </ng-container>
  `,
})
export class ApesButtonListComponent implements OnInit {
  prefixCls = 'apes-button-list';
  @Input() ctx = {};

  @Input() buttonBarMetadata = [];
  @Input() buttonGroupMetadata = [];

  @Output()
  click: EventEmitter<any> = new EventEmitter<any>();
  @Output()
  mouseover: EventEmitter<any> = new EventEmitter<any>();

  constructor(private expressionService: ExpressionService) {
  }

  ngOnInit() {
  }

  _onclick(data: any, event) {
    event.stopPropagation();
    event.preventDefault();
    if (data['loading'] == true) return;
    data['loading'] = true;
    this.click.emit(data);
    setTimeout(() => {
      data['loading'] = false;
    }, 500);
  }

  _onMouseOver(data: any) {
    // this._list.filter(data => data);
    this.mouseover.emit(data);
  }

  evaluate(expression: string | boolean) {
    if (missing(expression)) return false;
    return this.expressionService.eval(typeof expression === 'boolean' ? JSON.stringify(expression) : expression, {
      context: this.ctx,
      model: this.ctx['model'],
    });
  }

}
